<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id ? '编辑' : '新增'" @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="网页地址" prop="url">
            <el-input type="textarea" v-model="form.url" maxlength="2048" disabled placeholder="请输入网页地址"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片地址" prop="imgUrl">
            <el-input type="textarea" v-model="form.imgUrl" maxlength="2048" disabled placeholder="请输入图片地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" maxlength="255" placeholder="请输入标题"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="文章内容" prop="articleContent">
            <div v-if="WangEditorShow">
              <WangEditor v-model="form.articleContent"/>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="地址详情" prop="urlDetail">
            <el-input type="textarea" v-model="form.urlDetail" maxlength="2048" disabled
                      placeholder="请输入文章地址详情"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集日期">
            <el-date-picker v-model="form.crawlerDate" type="date" disabled placeholder="请选择采集日期"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="formLoading">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addCrawlerData, getCrawlerData, updateCrawlerData} from "@/api/app/crawlerData";

const formRef = ref<FormInstance>()


const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
  id: null,
  url: null,
  title: null,
  imgUrl: null,
  articleContent: null,
  urlDetail: null,
  crawlerDate: null,
});

// 效验规则
const rules = reactive<FormRules>({})

const WangEditorShow = ref(false)

const formLoading = ref(false)

// 获取详情
const getDetails = (id: string) => {
  getCrawlerData(id).then(res => {
    form.value = Object.assign({}, form.value, res);
    WangEditorShow.value = true
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '新增采集数据';
  if (id) {
    dialogData.id = id;
    dialogData.title = '编辑采集数据';
    getDetails(id);
  }
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
  form.value = {};
  WangEditorShow.value = false
}
// 提交

const submit = async () => {

  if (!formRef.value) return;
  formLoading.value = true;

  try {
    // 使用 await 等待表单验证
    const valid = await formRef.value.validate();

    if (valid) {
      const data = {...form.value};

      if (data.id) {
        await updateCrawlerData(data);
      } else {
        await addCrawlerData(data);
      }

      ElMessage.success('操作成功');
      closeDialog();
      emits('refresh');
    }
  } catch (error) {
    // 处理错误（验证失败或请求异常）
    ElMessage.error('操作失败');
  } finally {
    formLoading.value = false; // 无论成功失败，关闭 loading
  }
}

defineExpose({
  openDialog,
});
</script>

<style scoped></style>
